<template>
  <div class="activity-management">
    <h1>活动管理</h1>
    <div class="management-actions">
      <button @click="showAddDialog = true" class="add-btn">添加活动</button>
    </div>
    
    <table class="activity-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>日期</th>
          <th>地点</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="activity in activities" :key="activity.id">
          <td>{{ activity.id }}</td>
          <td>{{ activity.title }}</td>
          <td>{{ activity.date }}</td>
          <td>{{ activity.location }}</td>
          <td>
            <button @click="editActivity(activity)" class="edit-btn">编辑</button>
            <button @click="deleteActivity(activity.id)" class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加/编辑对话框 -->
    <div v-if="showAddDialog || showEditDialog" class="dialog-overlay">
      <div class="dialog">
        <h2>{{ showAddDialog ? '添加活动' : '编辑活动' }}</h2>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label>标题</label>
            <input v-model="currentActivity.title" required>
          </div>
          <div class="form-group">
            <label>描述</label>
            <textarea v-model="currentActivity.description" required></textarea>
          </div>
          <div class="form-group">
            <label>日期</label>
            <input type="date" v-model="currentActivity.date" required>
          </div>
          <div class="form-group">
            <label>地点</label>
            <input v-model="currentActivity.location" required>
          </div>
          <div class="form-actions">
            <button type="button" @click="cancelForm" class="cancel-btn">取消</button>
            <button type="submit" class="submit-btn">提交</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import activities from '../data/activities'

export default {
  name: 'ActivityManagement',
  data() {
    return {
      activities: [...activities],
      showAddDialog: false,
      showEditDialog: false,
      currentActivity: {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      }
    }
  },
  methods: {
    editActivity(activity) {
      this.currentActivity = {...activity}
      this.showEditDialog = true
    },
    deleteActivity(id) {
      if (confirm('确定要删除此活动吗？')) {
        this.activities = this.activities.filter(a => a.id !== id)
      }
    },
    submitForm() {
      if (this.showAddDialog) {
        // 添加新活动
        const newId = Math.max(...this.activities.map(a => a.id)) + 1
        this.activities.push({
          ...this.currentActivity,
          id: newId
        })
      } else {
        // 更新活动
        const index = this.activities.findIndex(a => a.id === this.currentActivity.id)
        this.activities.splice(index, 1, {...this.currentActivity})
      }
      this.resetForm()
    },
    cancelForm() {
      this.resetForm()
    },
    resetForm() {
      this.showAddDialog = false
      this.showEditDialog = false
      this.currentActivity = {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      }
    }
  }
}
</script>